<template>
  <div >
    <el-upload
      drag
      class="upload"
      :disabled="!self.obj.name"
      :action="action"
      :data="{}"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :before-upload="beforeUpload"
      :on-success="onSuccess"
      :on-error="onError"
      :multiple="multiple"
      :limit="limit"
      :on-exceed="handleExceed"
      :file-list="fileList"
    >
      <div :class="{zhezhao:!self.obj.name}">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text" >将文件拖到此处，或<em>点击上传</em></div>
        <div slot="tip" class="el-upload__tip">{{uploadTip}}</div>
      </div>
    </el-upload>
  </div>
</template>
<script>
export default {
  name: "Uploads",
  data() {
    return {
      fileList: []
    };
  },
  props: {
    action: {
      //提交地址
      type: String,
      default: ""
    },
    uploadTip: {
      //提交地址
      type: String,
      default: ""
    },
    limit: {
      //文件个数限制
      type: [Number,Boolean],
      default: false
    },
    maxSize: {
      //文件大小限制
      type: [Number,Boolean],
      default: null
    },
    multiple: {
      //是否支持多选文件
      type: Boolean,
      default: true
    },
    self: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  methods: {
    handlePreview(file) {  //点击上传成功的文件
      console.log(file);
    },
    handleRemove(file, fileList) {   //删除后回调
      console.log(file, fileList);
    },
    handleExceed(files, fileList) {  //文件超出个数限制时的钩子
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    beforeUpload(file){
      console.log(file)
      if(this.maxSize && file.size > 100){
      // if(this.maxSize && file.size > this.maxSize * 1024 * 1024){
        this.$message.warning(`上传的文件大小不能超过${this.maxSize}MB`);
        return false
      }
    },
    onSuccess(response, file, fileList){
      console.log(fileList)
      this.self.obj.value = fileList
    },
    onError(err, file, fileList){

    }
  },
  mounted() {}
};
</script>
<style lang="scss" scope>
.zhezhao{
  width:100%;height:100%;
  background-color: rgb(245, 247, 250);
  cursor:not-allowed
}
</style>
